<template>
  <div class="page-container about-setting-container">
    <div class="form-container">
      <div class="title-main">网站信息</div>
      <div class="form-item">
        <div class="title">网站标题</div>
        <el-input disabled v-model="setting.data.siteTitle"></el-input>
      </div>
      <div class="form-item">
        <div class="title">邮箱</div>
        <el-input disabled v-model="setting.data.mail"></el-input>
      </div>
      <div class="form-item">
        <div class="title">备案号</div>
        <el-input disabled v-model="setting.data.icp"></el-input>
      </div>
      <div class="form-item">
        <div class="title">头像</div>
        <Upload :image-url="setting.data.avatar" />
      </div>
      <div class="form-item">
        <div class="title">网站头像</div>
        <Upload :image-url="setting.data.favicon" />
      </div>
      <div class="form-item">
        <div class="title">Github</div>
        <el-input disabled v-model="setting.data.github"></el-input>
      </div>
      <div class="form-item">
        <div class="title">qq</div>
        <el-input disabled v-model="setting.data.qq"></el-input>
      </div>
      <div class="form-item">
        <div class="title">qq二维码</div>
        <Upload :image-url="setting.data.qqQrCode" />
      </div>
      <div class="form-item">
        <div class="title">微信</div>
        <el-input disabled v-model="setting.data.weixin"></el-input>
      </div>
      <div class="form-item">
        <div class="title">微信二维码</div>
        <Upload :image-url="setting.data.weixinQrCode" />
      </div>
      <div class="form-item">
        <el-button @click="handleEdit" type="primary" size="large">编辑</el-button>
      </div>
    </div>
    <el-drawer size="90%" v-model="drawer" title="编辑设置" direction="rtl">
      <div class="drawer-container">
        <!-- 标题和邮箱 -->
        <el-row justify="space-around">
          <el-col :span="11">
            <div class="form-item">
              <div class="title">网站标题</div>
              <el-input v-model="setting.des.siteTitle"></el-input></div
          ></el-col>
          <el-col :span="11">
            <div class="form-item">
              <div class="title">邮箱</div>
              <el-input v-model="setting.des.mail"></el-input>
            </div>
          </el-col>
        </el-row>
        <!-- 备案号和github -->
        <el-row justify="space-around">
          <el-col :span="11">
            <div class="form-item">
              <div class="title">备案号</div>
              <el-input v-model="setting.des.icp"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="form-item">
              <div class="title">Github</div>
              <el-input v-model="setting.des.github"></el-input>
            </div>
          </el-col>
        </el-row>
        <!-- 头像和网址头像 -->
        <el-row justify="space-around">
          <el-col :span="11">
            <div class="form-item">
              <div class="title">网站头像</div>
              <Upload
                :image-url="setting.des.favicon"
                :change-image-url="(url:string)=>handleChangeImg(url,'favicon')"
              />
            </div>
          </el-col>
          <el-col :span="11">
            <div class="form-item">
              <div class="title">头像</div>
              <Upload
                :image-url="setting.des.avatar"
                :change-image-url="(url:string)=>handleChangeImg(url,'avatar')"
              />
            </div>
          </el-col>
        </el-row>
        <!-- qq和微信 -->
        <el-row justify="space-around">
          <el-col :span="11">
            <div class="form-item">
              <div class="title">qq</div>
              <el-input v-model="setting.des.qq"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="form-item">
              <div class="title">微信</div>
              <el-input v-model="setting.des.weixin"></el-input>
            </div>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-row justify="space-around">
          <el-col :span="11">
            <div class="form-item">
              <div class="title">qq二维码</div>
              <Upload
                :image-url="setting.des.qqQrCode"
                :change-image-url="(url:string)=>handleChangeImg(url,'qqQrCode')"
              />
            </div>
          </el-col>
          <el-col :span="11">
            <div class="form-item">
              <div class="title">微信二维码</div>
              <Upload
                :image-url="setting.des.weixinQrCode"
                :change-image-url="(url:string)=>handleChangeImg(url,'weixinQrCode')"
              />
            </div>
          </el-col>
        </el-row>
        <el-row justify="center">
          <div class="form-item">
            <el-button type="primary" size="large" @click="handleEditChange"
              >确定</el-button
            >
            <el-button size="large" @click="handleCancel(false)">取消</el-button>
          </div>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ISettingObj, getSetting, updateSetting } from "@/api/setting";
import Upload from "@/components/Upload.vue";
import { reactive, onBeforeMount, ref } from "vue";
import { ElMessage } from "element-plus";

interface ISettingProp {
  data: ISettingObj;
  des: ISettingObj;
}

// 抽屉控制
const drawer = ref<boolean>(false);

// setting数据
const setting = reactive<ISettingProp>({
  data: {
    avatar: "",
    siteTitle: "",
    github: "",
    qq: "",
    qqQrCode: "",
    weixin: "",
    weixinQrCode: "",
    mail: "",
    icp: "",
    githubName: "",
    favicon: "",
    id: "",
  },
  des: {
    avatar: "",
    siteTitle: "",
    github: "",
    qq: "",
    qqQrCode: "",
    weixin: "",
    weixinQrCode: "",
    mail: "",
    icp: "",
    githubName: "",
    favicon: "",
    id: "",
  },
});

// 进行编辑
function handleEdit() {
  handleCancel(true);
  setting.des = { ...setting.data };
}

// 取消
function handleCancel(val: boolean) {
  drawer.value = val;
}

// 修改图片路径
function handleChangeImg(url: string, key: string) {
  setting.des[key] = url;
}

// 确认修改其内容
async function handleEditChange() {
  const res = await updateSetting({ ...setting.des });
  if (res.code === 0) {
    await fetchData();
    ElMessage({
      type: "success",
      message: "修改数据成功！",
    });
    handleCancel(false);
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}

// 数据请求
async function fetchData() {
  const res = await getSetting();
  if (res.code === 0) {
    setting.data = { ...res.data };
    console.log(setting.data.github);
  } else {
    ElMessage({
      message: res.msg,
      type: "success",
    });
  }
}

onBeforeMount(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
.title-main {
  margin: 15px 0px;
  color: #999;
  font-size: 2em;
}

.form-item {
  margin: 15px 0;
  .title {
    margin: 15px;
    color: #ccc;
  }
}

.drawer-container {
  margin-top: -30px;
  .title {
    color: #333;
    font-weight: bold;
    font-size: 17px;
  }
}
</style>
